<template>
    <div>
        <Content :style="{ minHeight: '380px', background: '#fff'}">
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <p style="position: center;font-size: larger;font-weight: bolder">聊天列表</p>
                    <Card v-if="talkerList.length===0">
                        您尚未发起任何聊天哦
                    </Card>
                    <router-link v-else v-for="(item,index) in talkerList" v-bind:to="talkerList[index].component" @click.native="click=true" :key="index"
                                 :value="index">
                        <Row  align="middle">
                            <Badge v-bind:dot="test">
                                <avatar v-bind:src="avatarList[index]" size="40"></avatar>
                            </Badge>
                            <Col span="18">
                                <Row type="flex" justify="center" class="code-row-bg"></Row>
                                <Card v-if="item.otherId===userId">
                                    <Row type="flex" justify="center" class="code-row-bg">
                                        {{ item.userName }}
                                    </Row>
                                </Card>
                                <Card v-else>
                                    <Row type="flex" justify="center" class="code-row-bg">
                                        {{ item.otherName }}
                                    </Row>
                                </Card>
                            </Col>
                        </Row>
                    </router-link>
                </Sider>
                <Content :style="{padding: '24px', minHeight: '580px', background: '#fff'}" v-if="click">
                    <router-view></router-view>
                </Content>
                <div v-else-if="talkerList.length!==0">点击左侧聊天头像即可与他们聊天啦
                </div>
            </Layout>
        </Content>
    </div>
</template>

<script>
    import axios from "axios";
    import globalData from "../../utils/globalData";

    export default {
        name: "MessageCenter",
        data() {
            return {
                click:false,
                userId:'',
                talkerList: [],
                avatarList:[]
            }
        },
        created: function () {
            //获取所有的聊天对象,并绑定动态路由
            this.userId=globalData.USER.userId
            let self = this
            axios({
                method: 'get',
                url: 'message/talkList/' + globalData.USER.userId
            }).then(function (res) {
                self.talkerList = res.data
                let my=self
                for (let i = 0; i < res.data.length; i++) {
                    self.talkerList[i].component = "/MessageShow/" + self.talkerList[i].talkerId
                    let otherAvatarUUID=''
                    if(self.userId==self.talkerList[i].userId){//本人就是发送者
                        otherAvatarUUID=self.talkerList[i].otherAvatarUUID
                    }else {
                        otherAvatarUUID=self.talkerList[i].userAvatarUUID
                    }
                    self.avatarList=[]
                    axios({
                        method:'get',
                        url:'/file/sig/avatar/' + otherAvatarUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        my.$set(my.avatarList,i,window.URL.createObjectURL(res.data))
                        // my.avatarList[i] = window.URL.createObjectURL(res.data)
                    })
                }

            })
        },
        methods: {}
    }
</script>

<style scoped>

</style>